<template>
  <div>
    <a-modal
      dialogClass="versionInfowrapper"
      v-model:visible="visible"
      title="版本更新"
      width="600px"
      :footer="null"
      @cancel="closeDialog"
    >
      <div class="versionInfo">
        <div class="versionName">当前版本: {{ versionInfo.new_version }}</div>
        <a-divider />
        <div class="info">
          <div class="versionTile"> 版本信息 </div>
          <div class="info-row" v-for="(val, _, i) in versionInfo.dataList" :key="i">
            <div class="version">{{ val.version }}</div>
            <div class="ver-info" v-for="(val1, _, j) in val.infoList" :key="j">
              {{ val1 }}
            </div>
          </div>
        </div>
      </div>
    </a-modal>
  </div></template
>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  interface versionModel {
    data?: Object;
    new_version?: string;
    dataList?: any[];
  }
  export default defineComponent({
    setup() {
      const visible = ref(false);
      let versionInfo = ref<versionModel>({});
      //关闭按钮
      function closeDialog() {
        visible.value = false;
      }
      //获取版本信息
      function getVsersionInfo(data) {
        visible.value = true;
        const info_data = data;
        let dataList = <any>[];
        for (let key in info_data.data) {
          const dataObj = {
            version: '',
            infoList: [],
          };
          dataObj.version = key;
          if (info_data.data[key].length > 0) {
            dataObj.infoList = info_data.data[key].split('\n');
          }
          dataList.push(dataObj);
        }
        info_data.dataList = dataList;
        console.log(data);
        versionInfo.value = info_data;
      }
      return { visible, closeDialog, getVsersionInfo, versionInfo };
    },
  });
</script>

<style lang="less">
  .versionInfowrapper {
    .ant-modal-close-x {
      width: 64px !important;
      line-height: 48px !important;
    }
    .versionName {
      font-weight: bold;
      padding: 20px;
      box-sizing: border-box;
      font-size: 16px;
    }
    .ant-divider-horizontal {
      margin: 0px;
    }
    .info {
      padding: 10px 20px 60px;
      box-sizing: border-box;
      font-size: 14px;
      max-height: 500px;
      overflow-y: scroll;
      .info-row {
        line-height: 30px;
        font-size: 14px;
        margin-bottom: 20px;
        .version {
          font-weight: bold;
          font-size: 16px;
        }
        .ver-info {
          text-indent: 2em;
        }
      }
    }
    .versionTile {
      font-size: 16px;
      margin-bottom: 10px;
    }
  }
</style>
